<template>
  <main>
    <el-input placeholder="请输入" class="ipt"></el-input>
  </main>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

</script>

<!-- 
总结一下scoped三条渲染规则：

给HTML的DOM节点加一个不重复data属性(形如：data-v-123)来表示他的唯一性
在每句css选择器的末尾（编译后的生成的css语句）加一个当前组件的data属性选择器（如[data-v-123]）来私有化样式
如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

Vue2 中使用 /deep/
Vue3 中使用 :deep()

Vue 提供了样式穿透:deep() 他的作用就是用来改变 属性选择器的位置
-->


<style scoped lang="less">
.ipt {
  width: 200px;
  margin: 100px 400px;
  color: #333;
  /* /deep/.el-input__inner {
    color: #fff;
    background-color: red;
  } */
  :deep(.el-input__inner) {
    color: #fff;
    background-color: red;
  }
}
</style>
